import { Card, Table, Button, Space, Form, Input, Upload } from 'antd';
const ExportJsonExcel = require('js-export-excel');
import { UploadOutlined } from '@ant-design/icons';

import { useState } from 'react';

const dataSource = [
  {
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号',
  },
];

const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  },
];

const index = () => {
  const fn = () => {
    const option: any = {};

    option.fileName = '学生档案';

    option.datas = [
      {
        // sheetData表格数据
        sheetData: dataSource,
        // sheetName表格名称
        sheetName: 'sheet',
        // 每一列对应哪一个字段
        sheetFilter: ['name', 'age', 'address'],
        // 表头信息
        sheetHeader: ['姓名', '年龄', '住址'],
        // 列宽
        columnWidths: [20, 20, 20],
      },
      {
        sheetData: [
          { one: '一行一列', two: '一行二列' },
          { one: '二行一列', two: '二行二列' },
        ],
      },
    ];

    var toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
  };

  const onFinish = (values: any) => {
    // console.log(values);
    console.log({ ...values, file: values.upload.file?.response?.object?.url });
  };

  const [imageUrl, setImageUrl] = useState<string>('');

  const uploadButton = (
    <div>
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  return (
    <Space direction="vertical" style={{ display: 'flex' }}>
      <Card extra={<Button onClick={fn}>导出</Button>}>
        <Table dataSource={dataSource} columns={columns} />
      </Card>

      <Card title="文件上传">
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="Password"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="上传文件"
            name="upload"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            {/* action表示的是上传的地址 */}
            {/* 默认情况下选中的时候就会自动上传 */}
            <Upload
              name="file"
              listType="picture-card"
              action="http://39.100.95.147:1404/file/uploadFile"
              onChange={(info) => {
                // info里面包含了文件的信息，以及后端返回的内容
                console.log(info.file?.response?.object?.url);
              }}
            >
              {/* <Button icon={<UploadOutlined />}>Click to Upload</Button> */}
              {imageUrl ? (
                <img src={imageUrl} alt="avatar" style={{ width: '100%' }} />
              ) : (
                uploadButton
              )}
            </Upload>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </Space>
  );
};

export default index;
